<template>
    <div style="width:1000px">
        <el-form ref="form" label-width="250px">
        <el-form-item>
          <el-link href="https://bng-obs-b140.obs.cn-east-2.myhuaweicloud.com/static/tpl/%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls" type="primary">下载模板</el-link>
        </el-form-item>

        <el-form-item>
          <el-upload
            v-model="form.filePath"
            ref="uploadExcel"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :on-error="handleError"
            accept=".xls,.xlsx"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeUploadFile"
            :before-remove="beforeRemove"
            :on-remove="onRemove"
            :file-list="fileList"
            :headers="getAuthorization()"
          >
            <el-button  plain>选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传1个模板文件(excel)，且不超过10M</div>
          </el-upload>
          <el-button type="primary" @click="uploadFileView()">导入数据</el-button>

        </el-form-item>
      </el-form>

    </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'

Vue.use(VXETable)
export default {
  name: 'upload',
  data() {
    return {
        fileList: [],
        uploadUrl:this.BASE_API_URL + 'ntocc-tps-api/fileUpload',
        form: {
          filePath:'',
          isView:'2'
        },
    }
  },
  created() {},
  methods: {
      // 上传成功回调
      handleSuccess(res, file) {
        this.$message({ message: res.msg, type: 'success' })
        this.form.filePath = res.data
      },
      onRemove(file, fileList) {
        // this.tableData=''
        this.form.filePath=''
      },

      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$notify.error({
          title: '错误',
          message: `文件上传失败`
        });
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },

      //导入数据
      uploadFileView() {
        if('' == this.form.filePath) {
          return this.$message.warning("请先上传文件")
        }
        request({
          // baseURL: 'http://192.168.31.215:9002',
          url: `/arpa-basic-api/goods/orderImport`,
          params: { filePath: this.form.filePath },
          method: 'post'
        }).then(response => {
          this.$message({ message: response.msg, type: 'success' })
          this.form = {}
          this.fileList = []
          this.$emit('fatherUploadMethod')
        })
      },

      //上传前校验
      beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf('.')+1)
        let size = file.size / 1024 / 1024
        if(extension !== 'xls' && extension !== 'xlsx') {
          this.$message.error("只能上传xls,xlsx的文件")
        }
        if(size > 10) {
          this.$message.error('上传文件大小不能超过 10MB!')
        }
      },

      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },

    // 取消
    funcCancel() {
      if (this.optionType == 'edit') {
        this.$emit('fatherCancelMethod', 'edit')
      } if (this.optionType == 'add') {
        this.$emit('fatherCancelMethod', 'add')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin:15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
